<template>
  <!--账户管理-->
    <div>
      <!--账户展示-->
      <div class="l-accont-info">
        <div class="l-account-item">
          <p class="l-money">
           {{person.userInfo.moneyWallet | toFixed}}
          </p>
          <p>账户DFC</p>
        </div>
        <div class="l-account-item l-line">
          <p class="l-money">
            {{person.userInfo.privateCoin | toFixedSix}}
          </p>
          <p>账户DFT</p>
        </div>
      </div>

      <!--按钮-->
      <div class="l-btn-ground">
        <div data-name="conversion" @touchstart="router" class="l-btn">
          兑换
        </div>
        <div data-name="transfer" @touchstart="router" class="l-btn">
          转赠
        </div>
        <div data-name="extract" @touchstart="router" class="l-btn">
          提取
        </div>
      </div>

      <!--表格-->
      <Ltable @updateHeader="updateHeader" :headerList="headerList"></Ltable>
    </div>
</template>

<script>
    import Ltable from "./common/Ltable"
    import {mapState, mapActions} from 'vuex'
    export default {
        name: "account",
        data () {
          return {
            headerList: [
              {
                col: "转赠人手机号码"
              },
              {
                col: "转赠地址"
              },
              {
                col: "获赠数量"
              },
              {
                col: "获赠时间"
              }
            ]
          }
        },
        created () {
          this.updateUserInfo()
        },
        components: {
          Ltable
        },
        computed: {
          ...mapState(['person'])
        },
        methods: {
          ...mapActions(['updateUserInfo']),
          router (e) {
            this.$router.push({name: e.target.dataset.name})
          },
          updateHeader (index) {
            if(index === 0) {
              this.headerList=  [
                {
                  col: "转赠人手机号码"
                },
                {
                  col: "转赠地址"
                },
                {
                  col: "获赠数量"
                },
                {
                  col: "获赠时间"
                }
              ]
            } else if (index === 1 ) {
              this.headerList=  [
                {
                  col: "获赠人手机号码"
                },
                {
                  col: "获赠地址"
                },
                {
                  col: "转赠数量"
                },
                {
                  col: "转赠时间"
                }
              ]
            } else if (index === 2) {
              this.headerList=  [
                {
                  col: "提取人手机号码"
                },
                {
                  col: "提取地址"
                },
                {
                  col: "提取数量"
                },
                {
                  col: "提取时间"
                }
              ]
            }
          }
        },
        filters: {
          toFixed (val) {
            if(typeof val == 'number') {
              return val.toFixed(2)
            }
          },
          toFixedSix (val) {
            if(typeof val == 'number') {
              return val.toFixed(6)
            }

          }
        }
    }
</script>

<style lang="less" scoped>
  .l-accont-info {
    display: flex;
    justify-content: space-between;
    width: 700px;
    margin: auto;
    font-size: 28px;
    color: #986d33;

    .l-account-item {
      flex-basis: 50%;
      box-sizing: border-box;

      &.l-line {
        border-left: 2px solid #986d33;
        padding-left: 30px;
      }
    }

    .l-money {
      font-size: 40px;
      margin-bottom: 10px;
      color: #000;
    }
  }


  .l-btn-ground {
    display: flex;
    justify-content: flex-end;
    box-sizing: border-box;
    padding: 20px;
    margin-bottom: 30px;
    .l-btn {
      width: 166px;
      height: 50px;
      line-height: 50px;
      border-radius: 45px;
      text-align: center;
      background-color: #986d33;
      margin-left: 20px;
      color: #fff;
      font-size: 28px;

    }
  }
</style>
